(function () {
   // 获取localStorage里面的数据如果里面没有数据就不加载表当
   //2. 获取本地cookie的数据(购物车的数据)
   let Shoppinglist = JSON.parse(localStorage.getItem("cartLsit") || "[]");
   $(window).load(function () {
      var b = $.isEmptyObject(Shoppinglist);
      if (!b == true) {
         $(".product").html(` <table>
         <thead>
          <tr>
          <th><input type='checkbox' id="all"></th>
          <th>全选</th><th> 商品名称</th>
          <th> 规格</th><th> 单价</th>
          <th> 数量</th><th> 小计</th>
          <th> 操作</th></tr>
          </thead>
         <tbody id='tab'>

         </tbody>
          </table>
         
          `)
         $(".close").html(` <p class="proceed">继续购物</p>
         <p>共件<span>1</span>件商品，已选择 <span>0</span></p>
         <p>合计（不含运费）：￥<span class="total">109</span></p>
         <button>去结算</button>`)
      }
      // 把数据显示的页面上
      var strhtml = ''
      Shoppinglist.forEach((item, index) => {
         strhtml += `
         <tr data-id=${item.id} >
              <td><input type="checkbox"></td>
               <td><img style=" width: 62px;
               height: 62px; margin: auto;" src=${item.img}></td>
                <td>${item.name}</td>
                <td><span class="color">${item.color}</span> <span class="size">${item.size}</span> </td>
               <td  class="price1" data-price="${item.price}" >￥${item.price}</td>
               <td>
                  <div class="jiajian" style="font-size:18px ;">
                     <p class="jia" data-id=${item.id}>+</p>
                     <input type="text" style=" width: 15px" value="${item.sl}" class="quantity"/>
                     <p class="jian" data-id=${item.id}>-</p>
                     </div>
                </td>
               <td style="color:red; "class="subtotal"  subtotal=${item.price * item.sl}>￥
                   <span class="subtotal2">${item.price * item.sl}</span > </td>
               <td ><a class='del' style="color:#000">删除</a></td>
         </tr>
         `
      })
      $("#tab").html(strhtml)

   });

   $.fn.extend({
      product() {
         let Shoppinglist = JSON.parse(localStorage.getItem("cartLsit") || "[]");
         // 点击++时数量加一并且后面的金额也变化 
         $(".product").delegate(".jia", "click", function (e) {
            var n = $(this).next().val();
            var num = parseInt(n) + 1;
            $(this).next().val(num);
            // 改变页面数量
            let price1 = $(this).parent().parent().parent().find(".price1").attr("data-price")
            $(this).parent().parent().parent().find(".subtotal2").text(num * price1)
            // 改变localStorage数量
            Shoppinglist.forEach((item, index) => {
               let id = $(this).attr("data-id")
               if (id == item.id) {
                  item.sl = num
                  //  $(".subtotal").text(item[0].price*num)
                  // $(this).parent().find(".subtotal").text(item.price * num)
               }

            })
            console.log($(this).index());
            localStorage.setItem("cartLsit", JSON.stringify(Shoppinglist), {
               expires: 10,
            })
         })
         // 点击--时数量加一并且后面的金额也变化 
         $(".product").delegate(".jian", "click", function (e) {
            var n = $(this).prev().val();
            var num = parseInt(n) - 1;
            if (num < 1) {
               num = 1
            }
            $(this).prev().val(num);
            // 改变页面数量
            let price1 = $(this).parent().parent().parent().find(".price1").attr("data-price")
            $(this).parent().parent().parent().find(".subtotal2").text(price1 * num)
            // 改变localStorage数量
            Shoppinglist.forEach((item, index) => {
               let id = $(this).attr("data-id")
               if (id == item.id) {
                  item.sl = num
                  //  $(".subtotal").text(item[0].price*num)
                  //  $(this).parent().find(".subtotal").text(item[0].price*num)
               }
            })
            console.log($(this).index());
            localStorage.setItem("cartLsit", JSON.stringify(Shoppinglist), {
               expires: 10,
            })
         })



         // 删除商品
         $(".product").delegate(".del", "click", function (e) {

            let Shoppinglist = JSON.parse(localStorage.getItem("cartLsit") || "[]");
            let id = $(this).parent().parent().attr("data-id")
            console.log(id);
            //采用ES6 快速找数组的下标
            let index = Shoppinglist.findIndex((item, index) => {
               console.log(item);
               return item.id == id
               console.log(item.id);
            })
            console.log(index);
            //   删除数据库
            Shoppinglist.splice(index, 1)
            //   删除页面效果
            $(this).parent().parent().remove()
            localStorage.setItem("cartLsit", JSON.stringify(Shoppinglist), {
               expires: 10,
            })
         })
         // // 点击返回商品详情页
         // $(".product").on( "click",".proceed",function(){
         //    location="../details.html"
         //    console.log(11111);
         // })
         //   全选与反选
         $(".product").delegate("#all", "click", function (e) {
            // 全选商品
            $("tbody :checkbox").prop("checked", $(this).prop("checked"))
            // 如果商品全选了全选框就自动打勾否则不打勾
         })


         $(".product").delegate("tbody :checkbox", "click", function (e) {
            // 获取到复选框的个数
            let cbxCount = $("tbody :checkbox").length;
            // 获取到'被'打钩的复选框的个数
            console.log(this);
            let checkCount = $("tbody :checkbox:checked").length;

            //2个 个数进行比较,如果相等, all打钩,否则all不打钩
            $("#all").prop("checked", cbxCount == checkCount)

            if ($(this).prop("checked") == true) {
               // let id =$(this).parent().parent().attr("data-id");
               let total = $(".total").text()
               let subtotal = $(".subtotal").attr("subtotal")
               $(".total").text(subtotal)
            } else {
               let total = $(".total").text()
               let subtotal = $(".subtotal").attr("subtotal")
               // $(".total").text(total / subtotal)
            }
         })
      }
   });
   $(function () {
      $(".product").product()
   });


   $(function () {
      // 获取本地数据 根据里面的数据条数把显示到购物车有几条数据
      let Shoppinglist = JSON.parse(localStorage.getItem("cartLsit") || "[]");
      $(window).on("load", function () {
         Shoppinglist.forEach((item, index) => {
            $(".user-btn2 span").text(index + 1)
            // console.log(item);
         })

      })
   })


})();
